<template>
  <div class="app-container">
    <el-row :gutter="20">
      <!--部门数据-->
      <el-col :span="4" :xs="24">
        <div class="head-container">
          <!-- <el-row :gutter="10" class="mb8">
            <el-tooltip
              class="item"
              effect="dark"
              content="新建"
              :open-delay="500"
              placement="top-start"
            >
              <el-button
                @click="add"
                icon="el-icon-circle-plus-outline"
                circle
                size="mini"
              ></el-button>
            </el-tooltip>
            <el-tooltip
              class="item"
              effect="dark"
              content="编辑"
              :open-delay="500"
              placement="top-start"
            >
              <el-button
                type="primary"
                @click="edit"
                icon="el-icon-edit"
                circle
                size="mini"
              ></el-button>
            </el-tooltip>
            <el-tooltip
              class="item"
              effect="dark"
              content="删除"
              :open-delay="500"
              placement="top-start"
            >
              <el-button
                type="danger"
                @click="del"
                icon="el-icon-delete"
                circle
                size="mini"
              ></el-button>
            </el-tooltip>
          </el-row> -->
        </div>
        <div
          class="head-container"
          style="max-height: calc(100vh - 160px); overflow-y: auto"
        >
          <el-tree
            :data="deptOptions"
            :props="defaultProps"
            :check-on-click-node="true"
            :expand-on-click-node="false"
            ref="tree"
            show-checkbox
            node-key="id"
            default-expand-all
            highlight-current
            @node-click="handleNodeClick"
            :check-strictly="true"
          >
            <span slot-scope="{ node, data }" class="custom-tree-node">
              <el-tooltip
                class="item"
                effect="dark"
                :content="node.label"
                placement="top-start"
                :open-delay="500"
              >
                <span>
                  {{ node.label }}
                </span>
              </el-tooltip>
            </span>
          </el-tree>
        </div>
      </el-col>
      <!--用户数据-->
      <el-col :span="20" :xs="24">
        <el-row :gutter="10" class="mb8">
          <el-col :span="1.5">
            <el-button
              type="primary"
              plain
              icon="el-icon-plus"
              size="mini"
              @click="addAdd"
              >新建</el-button
            >
          </el-col>
        </el-row>

        <el-table
          :data="tableData"
          style="width: 100%; height: calc(100%-80vh)"
        >
          <el-table-column label="模版类型" show-overflow-tooltip>
            <template slot-scope="scope">
              <span>{{ scope.row.protocolTypeCn || '-' }}</span>
            </template>
          </el-table-column>
          <el-table-column label="模版名称" show-overflow-tooltip>
            <template slot-scope="scope">
              <span>{{ scope.row.protocolTemplateName || '-' }}</span>
            </template>
          </el-table-column>
          <el-table-column label="创建人" show-overflow-tooltip>
            <template slot-scope="scope">
              <span>{{ scope.row.createUser || '-' }}</span>
            </template>
          </el-table-column>
          <el-table-column label="创建时间" show-overflow-tooltip>
            <template slot-scope="scope">
              <span>{{ scope.row.createDate || '-' }}</span>
            </template>
          </el-table-column>
          <el-table-column label="状态" show-overflow-tooltip>
            <template slot-scope="scope">
              <el-switch
                v-model="scope.row.status"
                :active-value="1"
                :inactive-value="0"
                active-color="#13ce66"
                inactive-color="#ff4949"
                @change="deactivate(scope.row)"
              >
              </el-switch>
            </template>
          </el-table-column>
          <el-table-column
            label="操作"
            align="center"
            width="120"
            fixed="right"
          >
            <template slot-scope="scope">
              <el-button
                type="text"
                size="mini"
                @click="editTableData(scope.row)"
              >
                编辑
              </el-button>
              <el-button
                type="text"
                size="mini"
                style="color: red"
                @click="delTableData(scope.row)"
              >
                删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-col>
    </el-row>

    <el-dialog
      :title="title"
      :visible.sync="dialogVisible"
      width="30%"
      :close-on-press-escape="false"
      :close-on-click-modal="false"
      @close="closeDialog"
    >
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
        @submit.native.prevent
      >
        <el-form-item label="模板类型：" prop="protocolName">
          <el-input
            v-model="ruleForm.protocolName"
            placeholder="请输入模板类型"
          ></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="closeDialog">取 消</el-button>
        <el-button type="primary" @click="submit">确 定</el-button>
      </span>
    </el-dialog>

    <addProtocolTypeDialog
      ref="addTemplateDialogRef"
      :addProtocolTypeTitle="addProtocolTypeTitle"
      :editTable="editTable"
      :listInId="listInId"
      :treeName="treeName"
    />
  </div>
</template>

<script>
import {
  protocolType,
  protocolTypeUpdate,
  protocolTypeList,
  protocolTypeRemove,
  protocolTemplateList,
  protocolTemplateRemove,
  protocolTemplateUpdate
} from '@/api/allApi.js'

import addProtocolTypeDialog from './addProtocolTypeDialog.vue'
export default {
  name: 'EitcErmPcIndex',
  components: {
    addProtocolTypeDialog
  },
  data() {
    return {
      tableData: [],
      deptOptions: [],
      defaultProps: {
        children: 'childrenList',
        label: 'protocolName'
      },
      ruleForm: {
        protocolName: ''
      },
      editTable: {},
      treeName: '',
      rules: {
        protocolName: [
          {
            required: true,
            message: '请输入模板类型',
            trigger: 'blur'
          }
        ]
      },
      lookFlag: false,
      listInId: '',
      dialogVisible: false,
      title: '',
      addProtocolTypeTitle: '',
      total: 0
    }
  },

  mounted() {
    this.initProtocolTypeList()
  },

  methods: {
    editTableData(row) {
      this.editTable = row
      this.addProtocolTypeTitle = '编辑'
      this.$refs.addTemplateDialogRef.addProtocolTypeDialog = true
    },
    async deactivate(row) {
      const res = await protocolTemplateUpdate(row)
        if (res.code !== 200) return this.$message.error(res.msg);
        this.$message.success("编辑成功!")
        this.initList()
    },
     delTableData(row) {
      this.$confirm('此操作将永久删除该项, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(async() => {
          const res = await protocolTemplateRemove(row.id)
          if (res.code !== 200) return this.$message.error(res.msg);
          this.initList()
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
    },
    async initProtocolTypeList() {
      const res = await protocolTypeList()
      if (res.code !== 200) return this.$message.error(res.msg)
      this.deptOptions = res.data
      if (res.data.length) {
        this.listInId = this.deptOptions[0].id
        this.treeName = this.deptOptions[0].protocolName
        this.initList()
      }
    },
    async initList() {
      const res = await protocolTemplateList({ protocolType: this.listInId })
      if (res.code !== 200) return this.$message.error(res.msg)
      this.tableData = res.rows
      this.total = res.total
    },
    closeDialog() {
      this.ruleForm.protocolName = ''
      this.$refs.ruleForm?.resetFields()
      this.dialogVisible = false
      this.initList()
    },
    submit() {
      this.$refs.ruleForm.validate(async (valid) => {
        if (valid) {
          if (this.title === '新建') {
            const res = await protocolType({
              protocolName: this.ruleForm.protocolName
            })
            if (res.code !== 200) return this.$message.error(res.msg)
          } else {
            const res = await protocolTypeUpdate({
              protocolName: this.ruleForm.protocolName,
              id: this.listInId
            })
            if (res.code !== 200) return this.$message.error(res.msg)
          }
          this.$message.success(`${this.title}成功!`)
          this.initProtocolTypeList()
          this.closeDialog()
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    // 节点单击事件
    handleNodeClick(data, checked, indeterminate) {
      this.listInId = data.id
      this.treeName = data.protocolName
      if (checked && this.$refs.tree.getCheckedNodes().length > 1) {
        this.$refs.tree.setCheckedNodes([data])
      }
      this.initList()
    },
    addAdd() {
      if (!this.listInId) return this.$message.info('请先选择模版类型!')
      this.editTable = {
        protocolTemplateName: '',
        status: 1,
        protocolTemplateContent: ''
      }
      this.addProtocolTypeTitle = '新建'
      this.$refs.addTemplateDialogRef.addProtocolTypeDialog = true
    },
    add() {
      this.title = '新建'
      this.ruleForm.protocolName = ''
      this.dialogVisible = true
    },
    edit() {
      if (!this.$refs.tree.getCheckedNodes().length) {
        return this.$message.info('请选择需要编辑的选项')
      }
      this.title = '编辑'
      this.dialogVisible = true
      this.ruleForm.protocolName =
        this.$refs.tree.getCheckedNodes()[0].protocolName
    },
    del() {
      if (!this.$refs.tree.getCheckedNodes().length)
        return this.$message.info('请选择需要删除的选项')
      this.$confirm('此操作将永久删除该项, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          this.ids = this.$refs.tree.getCheckedNodes()[0].id
          const res = await protocolTypeRemove({ ids: this.ids })
          if (res.code !== 200) return this.$message.error(res.msg)
          this.$message.success('删除成功!')
          this.initProtocolTypeList()
        })
        .catch(() => {})
    }
  }
}
</script>